<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .a{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#363;
  transition:.2s;
}
.a:before,.a:after{
  content:"";
  position:absolute;
  width:12px;
  height:0;
  top:24px;
  border-style:solid;
  border-width:0 0 54px 0;
}
.a:before{
  left:27px;
  border-color:#fff rgba(255,255,255,0) #fff rgba(255,255,255,0);
  transition:.2s;
}
.a:after{
  left:54px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff #fff ;
  transition:.2s;
}

    </style>
</head>
<body>
    <div class="a"></div>
<div class="b">
  <i class="b1"></i>
  <i class="b2"></i>
  <i class="b3"></i>
</div>

</body>
</html>